<template>
	<div class="forecast">
		<div class="container">
			<h2>功能介绍</h2>
			<p class="intro">{{INTRODUCTION_TO_PATENT_FORECAST}}</p>
			<h2>使用说明</h2>
			<p class="intro">在这个部分，用户需要输入专利的各项信息，以供本系统进行影响力预测和技术价值评估。用户需要输入的信息有专利标题、IPC分类号、同族专利数量、引用专利数量、是否属于PCT申请。	其中，需要注意的是：</p>
			<p class="intro">（1）如果专利中有多个IPC分类号，相邻的IPC分类号之间必须用英文的";"进行分割，否则系统无法进行处理。</p>
			<p class="intro">（2）同族专利数量和引用专利数量必须输入一个不小于0的整数。</p>
			<p class="intro">（3）专利是否属于PCT申请则是根据申请号的数字的第五位来判断，第五位为“8”，则意味这个专利属于PCT申请，第五位为”1“，则意味着这个专利不属于PCT申请。</p>
			<p class="intro">（4）因为本系统数据库中只收录了主分类号属于H04大类的授权专利，因此本系统的功能暂时只针对主分类号属于H04大类的专利，其他领域的专利需要等待本系统数据库更新后才能进行处理。</p>

			<el-form
				class="forecast-form"
				ref="form"
				:model="forecastModel"
				:rules="rules"
				hide-required-asterisk
				label-width="100px"
				label-position="left"
			>
				<el-form-item
					label="标题"
					prop="title"
				>
					<el-input
						placeholder="请输入专利标题"
						v-model="forecastModel.title"
					/>
				</el-form-item>
				<el-form-item
					label="IPC"
					prop="IPC"
				>
					<el-input
						type="textarea"
						autosize
						placeholder="请输入IPC分类号分号隔开"
						v-model="forecastModel.IPC"
					/>
				</el-form-item>
				<el-form-item
					label="同族数量"
					prop="phrator"
				>
					<el-input
						placeholder="请输入同族数量"
						v-model.number="forecastModel.phrator"
					/>
				</el-form-item>
				<el-form-item
					label="引用数量"
					prop="citeAmount"
				>
					<el-input
						placeholder="请输入引用数量"
						v-model.number="forecastModel.citeAmount"
					/>
				</el-form-item>
				<el-form-item
					label="是否PCT申请"
					prop="isPCT"
				>
					<el-radio-group v-model="forecastModel.isPCT">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-button
					class="submit-btn"
					type="primary"
					:loading="submitLoading"
					@click="onclickSubmit"
				>
					提交
				</el-button>
			</el-form>
			<!-- 预测结果 -->
			<div v-if="result.result">
				<el-descriptions
					class="result"
					labelStyle="color: #333;"
					direction="vertical"
					:column="4"
					border
				>
					<el-descriptions-item>
						<p>
							该专利在5年后
							<span class="active">{{result.result === '0' ? '不能' : '能'}}</span>
							成为高影响力专利
						</p>
						<template slot="label">
							<el-tooltip
								class="item"
								effect="dark"
								content="专利能否成为高影响力专利的结果显示了本系统深度学习模型根据数据计算得到的结果，分为“专利能成为高影响力专利。”和“专利不能成为高影响力专利。"
								placement="top-start"
							>
								<i class="el-icon-question" />
							</el-tooltip>
							预测结果
						</template>
					</el-descriptions-item>
					<el-descriptions-item>
						{{result.prob}}
						<template slot="label">
							<el-tooltip
								class="item"
								effect="dark"
								content="准确率结果表示专利在5年后符合预测结果的可能性。"
								placement="top-start"
							>
								<i class="el-icon-question" />
							</el-tooltip>
							准确率
						</template>
					</el-descriptions-item>
					<el-descriptions-item>
						{{result.value_innovation}}
						<template slot="label">
							<el-tooltip
								class="item"
								effect="dark"
								content="技术核心价值的结果代表这个专利技术中的核心部分具有的价值。"
								placement="top-start"
							>
								<i class="el-icon-question" />
							</el-tooltip>
							技术核心价值
						</template>
					</el-descriptions-item>
					<el-descriptions-item>
						{{result.value_core}}
						<template slot="label">
							<el-tooltip
								class="item"
								effect="dark"
								content="技术创新价值的结果代表这个专利技术中的创新部分具有的价值。"
								placement="top-start"
							>
								<i class="el-icon-question" />
							</el-tooltip>
							技术创新价值
						</template>
					</el-descriptions-item>
				</el-descriptions>
				<p class="intro">PS：技术核心价值和技术创新价值均为相对价值，并非实际价值。同时因为专利的授权具有滞后性，一项专利的授权往往需要很长时间。所以专利数据并不完全，所以本系统评估出来的技术价值，仅供参考，用户应根据实际情况进行调整。</p>
			</div>
		</div>
	</div>
</template>
<script>
import { INTRODUCTION_TO_PATENT_FORECAST } from '@/store/data'
import { postForecast } from '@/api'
export default {
  data() {
    return {
      INTRODUCTION_TO_PATENT_FORECAST,
      forecastModel: {
        title: '用于在无线通信系统中发送上行链路信号的方法和设备',
        IPC: 'H04L1/18;H04W72/04;H04B7/26',
        phrator: 48, // 同族数量
        citeAmount: 120, // 引用数量
        isPCT: 1, // 是否PCT申请
      },
      rules: {
        title: {
          required: true,
          message: '标题不能为空',
        },
        IPC: {
          required: true,
          message: 'IPC不能为空',
        },
        phrator: [{
          required: true,
          message: '同族数量不能为空',
        }, {
          type: 'number',
          message: '同族数量应为数字类型',
        }],
        citeAmount: [{
          required: true,
          message: '引用数量不能为空',
        }, {
          type: 'number',
          message: '引用数量应为数字类型',
        }]
      },
      submitLoading: false,
      result: {}, // 预测结果
    }
  },
  methods: {
    /**
     * 点击提交
     */
    async onclickSubmit() {
      this.$refs[ 'form' ].validate(async(valid) => {
        if (valid && !this.submitLoading) {
          try {
            this.submitLoading = true
            const data = {
              title: this.forecastModel.title,
              IPC: this.forecastModel.IPC.replace(/\n/g, ''), // 去除换行
              Fnum: this.forecastModel.phrator,
              Cnum: this.forecastModel.citeAmount,
              PCT: this.forecastModel.isPCT,
            }

            this.result = await postForecast(data)
          } catch (err) { err }
          this.submitLoading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.forecast {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding-top: $navHeight;
  background-color: $white1;

  .container {
    flex: 1;
    min-width: 600px;
    max-width: 900px;
    padding: 10px 10px 30px;
    margin: 10px 0 30px;
    background-color: #ffffff;
    border-radius: $radiusMiddle;
    box-shadow: $shadow1;

    .intro {
      padding: 10px;
      text-indent: 2em;
    }

    .forecast-form {
      max-width: 500px;
      margin: 20px auto;

      .el-input {
        height: 40px;

        .el-input__inner {
          font-size: $sSmall;
        }
      }

      .submit-btn {
        display: block;
        width: 50%;
        margin: auto;
      }
    }

    .result {
      p {
        span {
          font-size: 18px;
          font-weight: 700;
          color: $blue;
        }
      }

      i {
        font-size: 18px;
        color: $gray;
        cursor: pointer;

        &:hover {
          color: $blue;
        }
      }
    }
  }
}
</style>
